<title>后台管理员</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>用户</cite></a>
    <a><cite>后台管理员</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-useradmin-formlist">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">登录名</label>
          <div class="layui-input-block">
            <input type="text" name="userName" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">角色</label>
          <div class="layui-input-inline">
            <div id="LAY-user-admin-list-roleSelect" class="xm-select-demo"></div>
          </div>
        </div>

        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search" id="LAY-user-back-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="layui-card-body">
      <div style="padding-bottom: 10px;">
        <button class="layui-btn layuiadmin-btn-admin" data-type="add" id="LAY-user-back-add">添加</button>
      </div>

      <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>

      <script type="text/html" id="buttonTpl">
        {{#  if(d.isLock == 1){ }}
        <button class="layui-btn layui-btn-danger layui-btn-xs">锁定</button>
        {{#  } else { }}
        <button class="layui-btn layui-btn-primary layui-btn-xs">正常</button>
        {{#  } }}
      </script>

      <script type="text/html" id="table-useradmin-user">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>编辑</a>
        {{#  if(d.roleName != '管理员'){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon layui-icon-delete"></i>删除</a>
        {{#  } }}
      </script>

    </div>
  </div>
</div>

<script>
  layui.use('useradmin', layui.factory('useradmin')).use(['admin', 'useradmin', 'table', 'xmSelect', 'layer'],
    function () {
      var $ = layui.$,
        admin = layui.admin,
        view = layui.view,
        table = layui.table,
        form = layui.form,
        xmSelect = layui.xmSelect,
        setter = layui.setter,
        layer = layui.layer;

      var ok = setter.response.statusCode.ok;
      var fail = setter.response.statusCode.fail;
      var error = setter.response.statusCode.error;

      var xm = xmSelect.render({
        el: '#LAY-user-admin-list-roleSelect',
        filterable: true,
        paging: true,
        pageSize: 3,
        pageEmptyShow: false,
        data: [],
      })

      $(document).ready(function () {
        admin.req({
          type: "get",
          url: "/mrc/public/roleSelect",
          success: function (res) {
            if (res.code == 200) {
              xm.update({
                data: res.data,
                autoRow: true
              })
            }
          },
          error: function () {
            xm.update({
              data: [],
              autoRow: true
            })
          }
        })
      });


      form.render(null, 'layadmin-useradmin-formlist');

      //监听搜索
      form.on('submit(LAY-user-back-search)', function (data) {
        var field = data.field;
        var selectArr = xm.getValue('valueStr');
        field.roleId = selectArr;
        delete field.select;

        table.reload('LAY-user-back-manage', {
          where: field
        });
      });

      //事件
      var active = {
        add: function () {
          admin.popup({
            title: '添加管理员',
            area: ['420px', '600px'],
            id: 'LAY-popup-useradmin-add',
            success: function (layero, index) {
              view(this.id).render('user/administrators/adminform').done(function () {
                form.render(null, 'layuiadmin-form-admin');


                var xm = xmSelect.render({
                  el: '#LAY-user-admin-list-form-roleSelect',
                  filterable: true,
                  paging: true,
                  radio: true,
                  clickClose: true,
                  pageEmptyShow: false,
                  layVerify: 'required',
                  data: []
                })

                admin.req({
                  type: "get",
                  url: "/mrc/public/roleSelect",
                  success: function (res) {
                    if (res.code == 200) {
                      res.data.forEach(function (a) {
                        try {
                          if (a.name == "管理员") {
                            a.disabled = true;
                            throw new Error("EndIterative");
                          }
                        } catch (e) {
                          if (e.message != "EndIterative") throw e;
                        }
                      })

                      xm.update({
                        data: res.data,
                        autoRow: true
                      })
                    }
                  },
                  error: function () {
                    xm.update({
                      data: [],
                      autoRow: true
                    })
                  }
                })

                //监听提交
                form.on('submit(LAY-user-back-submit)', function (data) {
                  var field = data.field;
                  var selectArr = xm.getValue('valueStr');
                  field.roleId = selectArr;

                  if (field.password != field.password2) {
                    layer.msg("两次密码不一致！", {
                      icon: 0
                    })
                    return false;
                  }

                  delete field.select;
                  delete field.password2;

                  // console.log(field);

                  admin.req({
                    type: "post",
                    url: "/mrc/user",
                    data: JSON.stringify(field),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (res) {
                      if (res.code == ok) {
                        layer.msg("新增成功", {
                          icon: 1
                        })
                      } else {
                        layer.msg("系统出错，请联系开发人员", {
                          icon: 0
                        })
                      }
                    }
                  });
                  layer.close(index); //执行关闭 
                  return false;
                });
              });
            },
            end: function () {
              user_table_reload();
            }
          });
        }
      }

      function user_table_reload() {

        var index = layer.load();
        table.reload('LAY-user-back-manage', {
          url: '/mrc/user'
        });
        layer.close(index);

      }

      form.verify({
        nickname: function (value, item) { //value：表单的值、item：表单的DOM对象
            if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
              return '用户名不能有特殊字符';
            }
            if (/(^\_)|(\__)|(\_+$)/.test(value)) {
              return '用户名首尾不能出现下划线\'_\'';
            }
            if (/^\d+\d+\d$/.test(value)) {
              return '用户名不能全为数字';
            }
          }

          //我们既支持上述函数式的方式，也支持下述数组的形式
          //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
          ,
        pass: [
          /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
        ]
      });

      $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });

    });
</script>